<template>
    <div class="payLoad">
      <ul>
        <li class="pay-title">订单付款</li>
        <li class="desk">收银台</li>
        <li class="pay-wait">待支付金额：¥2156.11</li>
        <li class="pay-method">支付方式</li>
      </ul>

      <ul class="pay-way">
        <li>
          <span>
            <img src="../../assets/image/zhifubao.png" alt="">
          </span>
          <span>支付宝支付</span>
          <span>
            <i @click="pay($event)" class="iconRadio on"></i>
          </span>
        </li>
        <li>
          <span>
            <img src="../../assets/image/weix.png" alt="">
          </span>
          <span>微信支付</span>
          <span>
            <i @click="pay($event)" class="iconRadio"></i>
          </span>
        </li>
        <li>
          <span>
            <img src="../../assets/image/zhifubao.png" alt="">
          </span>
          <span>支付宝支付</span>
          <span>
            <i @click="pay($event)" class="iconRadio"></i>
          </span>
        </li>
      </ul>

      <div class="payFooter">
        <div class="fr ml30">
          <button class="pay-but">
            <span>确认支付</span>
          </button>
        </div>
        <div class="fr fs16">
          合计&nbsp;:&nbsp;
          <span class="end">¥2156.11</span>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Pay",
      data(){
          return {
            checked: true
          }
      },
      methods: {
          pay(e){
            $(".iconRadio").removeClass("on");
            $(e.target).toggleClass("on")
          }
      }
    }
</script>

<style scoped>
  .payLoad {
    margin: 30px auto 0;
    width: 1200px;
    min-height: 450px;
  }

  .pay-title {
    padding-top: 2px;
    line-height: 22px;
    color: #333;
    font-size: 22px;
    font-weight: 700;
  }

  .desk {
    padding-top: 40px;
    padding-bottom: 22px;
    color: #333;
    font-size: 16px;
    font-weight: 700;
  }

  .pay-wait {
    display: block;
    margin: 10px 0;
    padding: 15px 20px;
    font-size: 16px;
    border: 1px solid #dbdbdb;
    border-radius: 2px;
    font-weight: bold;
  }

  .pay-method {
    padding-top: 22px;
    color: #333;
    font-size: 16px;
    font-weight: 700;
  }

  .pay-way {
    width: 100%;
    padding: 20px;
    float: left;
  }

  .pay-way li {
    width: 22%;
    margin: 10px 1%;
    border: 1px solid #dbdbdb;
    float: left;
  }

  .pay-way li span:nth-child(1){
    margin: 10px;
    display: inline-block;
    float: left;
  }

  .pay-way li span:nth-child(1) img {
    height: 40px;
    width: auto;
    display: block;
  }

  .pay-way li span:nth-child(2){
    line-height: 60px;
    display: inline-block;
    float: left;
  }

  .pay-way li span:nth-child(3){
    margin: 15px 10px 0 0;
    float: right;
    display: inline-block;
  }

  .iconRadio {
    background-position: 0 0;
    width: 30px;
    height: 30px;
    display: block;
    background: url("../../assets/image/icon.jpg") no-repeat;
    cursor: pointer;
  }

  .payFooter {
    margin: 10px 0 100px;
    height: 50px;
    line-height: 50px;
    clear: both;
  }

  .pay-but {
    padding-left: 40px;
    padding-right: 40px;
    height: 48px;
    border: none;
    background: linear-gradient(270deg,#0091f3,#4334ab);
    color: #fff;
    border-radius: 2px;
    font-size: 14px;
  }

  .end {
    font-size: 22px;
    font-family: Avenir;
    font-weight: bold;
  }



  .fr {
    float: right;
  }

  .ml30 {
    margin-left: 30px;
  }

  .fs16 {
    font-size: 16px;
  }


  .on {
    background-position: -30px 0;
  }
</style>
